
<script setup>
import axios from "axios";
import request from "@/js/util/request";
import { ElMessage } from 'element-plus'
import {useTokenStore} from "@/js/util/token";
import {ref} from "vue";
//控制注册和登录表单的显示，默认显示登录
const isLogin = ref(true)
//定义数据模型
const loginData = ref({
  username:'',
  password:'',
  rePassword:''
})
//校验密码的函数
const checkRePassword = (rule, value, callback)=>{
  if(value===''){
    callback(new Error('请再次确认密码'))
  }else if(value !== loginData.value.password){
    callback(new Error('请保证两次输入的密码都一样'))
  }else{}
  callback()
}
//定义表单校验规则
const rules = {
  username:[
      //trigger：blur失焦的时候触发
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 16, message: '长度为5~16位非空字符', trigger: 'blur'}
  ],
  password:[
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 3, max: 16, message: '长度为5~16位非空字符', trigger: 'blur'}
  ],
  //失焦的时候触发checkRePassword
  rePassword:[
    {validator:checkRePassword, trigger: 'blur'},
  ]
}
//登录方法:用异步函数获取，不然传回前端的是promise对象，不受json对象
import {UserLoginService, UserRegisterService} from "@/js/api/login"
import router from "@/router";
const  login = async () => {
  let result = await UserLoginService(loginData.value);
  let flag = result.data.flag;
  if(flag){//登录成功
    ElMessage.success(result.data.msg);
    useTokenStore().setToken(result.data.data);
    await router.push("/");
  }else{
    ElMessage.error(result.data.msg);
  }
}
//登录和注册切换时需要清空LoginData的数据，因为它们共用这一个数据
const clearLoginData = ()=>{
  loginData.value = {
    username:'',
    password:'',
    rePassword:''
  }
}

//注册
const register = async ()=>{
  let result = await UserRegisterService(loginData.value);
  let flag = result.data.flag;
  if(flag){
    ElMessage.success(result.data.msg);
    isLogin.value = true;
  }else{
    ElMessage.error(result.data.msg)
  }
  console.log(result);
}
</script>

<template>
<div id="Login">
  <el-container style="height: 100%">
    <el-aside class="left">

    </el-aside>
    <el-main class="right">
      <div id="login-form">
        <el-form v-if="isLogin" :model="loginData" :rules="rules">
          <h1>用户认证</h1>
          <el-form-item style="height: 20px; padding: 12px 20px; background-color: #FDF2D0; border-radius: 5px;">
            <el-icon><WarnTriangleFilled /></el-icon>
            <span style="line-height: 0px">您即将登录：<strong>回书商城</strong></span>
          </el-form-item>
          <el-form-item prop="username">
            <label>认证账号username</label>
            <el-input label="账号" type="text" v-model="loginData.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <label>认证密码password</label>
            <el-input label="密码" type="password" v-model="loginData.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;margin-top: 10px" @click="login">登录认证</el-button>
          </el-form-item>
          <el-form-item style="text-align: center;margin-top:-10px" id="another">
            <span><el-link type="primary">忘记密码?</el-link></span>
            <span><el-link type="primary" @click="isLogin = false; clearLoginData()">用户注册</el-link></span>
          </el-form-item>
        </el-form>

        <el-form v-else :model="loginData" :rules="rules">
          <h1>用户注册</h1>
          <el-form-item style="height: 20px; padding: 12px 20px; background-color: #FDF2D0; border-radius: 5px;">
            <el-icon><WarnTriangleFilled /></el-icon>
            <span style="line-height: 0px">您即将注册：<strong>回书商城</strong></span>
          </el-form-item>
          <el-form-item prop="username">
            <label>注册账号username</label>
            <el-input label="账号" type="text" v-model="loginData.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <label>注册密码password</label>
            <el-input label="密码" type="password" v-model="loginData.password"></el-input>
          </el-form-item>
          <el-form-item prop="rePassword">
            <label>确认密码password</label>
            <el-input label="密码" type="password" v-model="loginData.rePassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;margin-top: 10px" @click="register">注册用户</el-button>
          </el-form-item>
          <el-form-item>
            <el-link @click="isLogin = true;clearLoginData()"><el-icon><back /></el-icon>返回</el-link>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</div>
</template>

<style scoped>
#Login{
  height: 100%;
  width: 100%;
}
.left {
  width: 70%;
  background-image: url("../../public/back-img/background1.jpg");
  background-size: 100% 100%;
}
.right{
  display: flex;
  align-items: center;
}
#login-form{
  /*float: left;*/
  height: 70%;
  width: 80%;
  margin: auto;
  /*background-color: #42b983;*/
  text-align: center;
}
::v-deep .el-input__inner{
  height: 40px;
}
.el-form-item{
  margin-bottom: 5px;
}
.el-form-item label{
  font-weight: bold;
}
#another span{
  width: 50%;
}
</style>